<template>
  <div>
    <!--sticky && header-->
    <sticky>
      <x-header>
        <x-icon slot="overwrite-left" type="navicon" size="35" class="header-left" @click="leftmenu.show=!leftmenu.show"></x-icon>
        <span>{{header.title}}</span>
        <x-icon slot="right" type="ios-chatbubble-outline" size="35" class="header-right"></x-icon>
      </x-header>
    </sticky>
    <!--通知-->
    <group>
      <cell title="通知"></cell>
      <panel :list="notice" type="2"></panel>
    </group>
    <!--食谱-->
    <group>
      <cell title="食谱" is-link></cell>
      <panel :list="recipe" type="1"></panel>
    </group>
    <!--园区地图-->
    <group style="padding-bottom: 1.17647059em">
      <cell title="园区地图"></cell>
      <div class="map" style="width: 80%;height: 200px;background: #666;margin: 0 auto;margin-bottom: 20px"
           @click="toMap"></div>
    </group>
    <!--侧边栏-->
    <div v-transfer-dom>
      <popup v-model="leftmenu.show" position="left" class="leftmenu" width="70%">
        <div class="leftmenu-content">
          <group>
            <panel :list="leftmenu.user" type="1"></panel>

            <cell v-for="menu in leftmenu.menu" :title="menu.title" :border-intent="false"
                  :link="menu.link">
              <img slot="icon" width="30" style="display:block;margin-right:25px;"
                   :src="menu.img">
            </cell>
          </group>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
  import {XHeader, Sticky, Group, Cell, CellBox, Panel, TransferDom, Popup} from 'vux'

  export default {
    directives: {
      TransferDom
    },
    components: {
      XHeader,
      Sticky,
      Group,
      Cell,
      CellBox,
      Panel,
      Popup
    },
    data() {
      return {
        // header
        header: {
          title: '园区管理'
        },
        notice: [
          {
            title: '狂欢晚会',
            desc: '业主您好，本园区将在11.11日晚7：30举办购物晚会，欢迎您参加！',
            url: 'personnel'
          },
          {
            title: '狂欢晚会',
            desc: '业主您好，本园区将在11.11日晚7：30举办购物晚会，欢迎您参加！',
            url: 'personnel'
          }
        ],
        recipe: [
          {
            src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
            desc: '香葱拌素鸡 咸鸭蛋 开胃菜 雪菜炒黄豆 牛肉包子 小米粥 煮鸡蛋 玉米燕麦粥',
            url: 'personnel'
          },
          {
            src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
            desc: '粉蒸排骨 溜肉段 地三鲜 川北凉粉 土豆丝 米饭 玉米 葱油饼',
            url: 'personnel'
          },
          {
            src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
            desc: '炸鸡排 红烧排骨 木耳炒鸡蛋 黄瓜拉皮 米饭 玉米 葱油饼',
            url: 'personnel'
          }
        ],
        leftmenu: {
          show: false,
          user: [{
            src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
            title: '林华',
            desc: '18558555885',
            url: 'personnel'
          }],
          menu: [
            {
              title: '人员管理',
              img: '',
              link: 'personnel'
            },
            {
              title: '排班安排',
              img: '',
              link: 'schedule'
            },
            {
              title: '预约保洁',
              img: '',
              link: 'cleaning'
            },
            {
              title: '报修管理',
              img: '',
              link: 'repair'
            },
            {
              title: '我的位置',
              img: '',
              link: 'location'
            },
            {
              title: '每周食谱',
              img: '',
              link: 'recipe'
            },
            {
              title: '消息通知',
              img: '',
              link: 'message'
            }
          ]
        }
      }
    },
    methods: {
      toMap() {
        this.$router.push('map')
      }
    }
  }
</script>

<style scoped>
  .vux-demo {
    text-align: center;
  }

  .logo {
    width: 100px;
    height: 100px
  }

  .header-left {
    fill: #fff;
    position: relative;
    top: -8px;
    left: -3px;
  }

  .header-right {
    fill: #fff;
    position: relative;
    top: -8px;
    left: 3px;
  }

  .leftmenu {
    background: #fff !important;
    overflow: hidden !important;
  }

  .leftmenu-content {
    position: relative;
    height: 100%;
  }

  .leftmenu-content .weui-cell {
    padding: 15px 25px;
  }

  .leftmenu-content .weui-cells {
    margin-top: 0;
  }

  .leftmenu-content .weui-panel {
    margin-bottom: 20px;
    background: #f4f6f9;
  }

  .leftmenu-content .weui-panel:before {
    border: none;
  }

  .leftmenu-content .weui-panel:after {
    border: none;
  }

  .leftmenu-content .weui-cells:before {
    border: none;
  }

  .leftmenu-content .weui-cells:after {
    border: none;
  }

  .leftmenu-content .weui-cell.vux-cell-no-border-intent:before {
    border: none;
  }
</style>
